<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战 - 调用Mock生成的莫兰迪色系图片 - Vue版</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <h2>F12打开控制台查看数据，效果更佳</h2>
    借鉴：https://blog.csdn.net/weixin_44500183/article/details/111413173
    <div class="box">
        展示内容:<div id="content"></div>

    </div>
    <div id="Application">
        <h1>调用Mock生成的莫兰迪色系图片</h1>
        <ul v-for="itm in imgData">
            <li><img :src=itm.image /></li>
            <li>产品名：{{itm.productName}}</li>
            <li>价格：{{itm.productPrice}}</li>
            <li>数量：{{itm.productSell}}</li>
        </ul>
    </div>



    <script>

        let Random = Mock.Random;
        const App = Vue.createApp({
            setup() {

                //生成数据
                let imgData = Mock.mock(() => {
                    const data = []
                    for (let i = 0; i < 16; i++) {
                        // 利用mockjs的Random随机生成数字并转成十六进制，拼接。
                        const a = '#' + Random.integer(180, 255).toString(16) +
                            Random.integer(140, 255).toString(16) +
                            Random.integer(120, 220).toString(16)
                        data.push({
                            image: Random.image('140x140', a, ' IMAGE '),
                            productName: Random.ctitle(),
                            productPrice: Random.float(10, 1000, 2, 3),
                            productSell: Random.integer(100, 10000),
                            isFreeShipping: Random.boolean()
                        })
                    }
                    return data
                })



                //展示数据
                console.table(imgData);
                x = document.getElementById("content");
                //将对象转为JSON
                //x.innerHTML = JSON.stringify(imgData, null, '<br />');

                return { imgData, }
            }
        })

        App.mount("#Application")
    </script>

</body>

</html>